<template>
    <div>
        <el-form :inline="true" :model="search">
            <el-form-item label="菜单名称:">
                <el-input prefix-icon="el-icon-search" v-model="search.name" placeholder="请输入内容"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="loadData()">查询</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="2" :offset="0">
                <el-button type="primary" plain @click="baseFormVisible = true">新增</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" border stripe>
            <el-table-column prop="name" label="流程名称">
            </el-table-column>

            <el-table-column prop="typeText" label="流程类型">
            </el-table-column>

            <el-table-column label="状态" align="center" width="90">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.status">启用</el-tag>
                    <el-tag type="info" v-if="!scope.status">禁用</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="是否任何人可发起" align="center" width="90">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.anyOneCanStart">是</el-tag>
                    <el-tag type="danger" v-if="!scope.anyOneCanStart">否</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="是否设计完成" align="center" width="90">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.isDesigned">是</el-tag>
                    <el-tag type="danger" v-if="!scope.isDesigned">否</el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="updateTime" label="更新时间">
            </el-table-column>

            <el-table-column label="操作" width="400">
                <template slot-scope="scope">
                    <el-button @click="editHandle(scope.row)" size="mini" plain icon="el-icon-edit">编辑</el-button>
                    <el-button type="success" plain size="mini" icon="el-icon-guide" @click="formDesignOpen(scope.row)">表单设计</el-button>
                    <el-button type="success" plain size="mini" icon="el-icon-data-analysis" @click="flowDesignOpen(scope.row)">流程设计</el-button>
                    <el-popconfirm style="margin-left: 10px;" title="是否确认删除？" confirmButtonText="确认" cancelButtonText="取消"
                        confirmButtonType="danger" cancelButtonType="text" @confirm="deleteHandle(scope.row)">
                        <el-button slot="reference" size="mini" type="danger" plain icon="el-icon-delete">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" align="center"
            :current-page="search.pageNum" :page-sizes="[10, 30, 50, 100]" :page-size="search.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>

        <base-form v-model="baseFormVisible" v-if="baseFormVisible" :workFlowId="currentRowId" @closed="loadData" ></base-form>
        <form-design v-model="formDesignVisible" v-if="formDesignVisible" :workFlowId="currentRowId"></form-design>
        <flow-design v-model="flowDesignVisible" v-if="flowDesignVisible" :workFlowId="currentRowId"></flow-design>
    </div>
</template>

<script>
import baseForm from '@/components/workflowTemplate/templateForm.vue'
import formDesign from '@/components/workflowTemplate/formDesign.vue'
import flowDesign from '@/components/workflowTemplate/flowDesign.vue'
import { getPageList,deleteTemplate } from "@/api/workFlowTemplate/workFlowTemplate";

export default {
    components: {
        baseForm, formDesign, flowDesign
    },
    created() {
        this.loadData()
    },
    data() {
        return {
            baseFormVisible: false,
            formDesignVisible: false,
            flowDesignVisible: false,
            totalCount: 0,
            search: {
                pageSize: 10,
                pageNum: 1,
                name: ''
            },
            tableData: [],
            currentRowId:'',
            keyOfDialog:{
                form:1,
                flow:1
            }
        }
    },
    methods: {
        async loadData() {
            let res = await getPageList(this.search)
            if (res.code == 10000) {
                this.tableData = res.data.data
                this.totalCount = res.data.count
            }
        },
        handleSizeChange(size) {
            this.search.pageSize = size
            this.loadData()
        },
        handleCurrentChange(num) {
            this.search.pageNum = num
            this.loadData()
        },
        editHandle(row) {
            this.currentRowId = row.id
            this.baseFormVisible = true
            console.log(row);
        },
        async deleteHandle(row) {
            let res = await deleteTemplate(row.id)
            if (res.code==10000) {
                this.$message({
                    type:'success',
                    message:'删除成功'
                })
                this.loadData()
            }else{
                this.$message({
                    type:'error',
                    message:res.code
                })
            }

        },
        flowDesignOpen(row){
            this.currentRowId = row.id
            this.flowDesignVisible = true
        },
        formDesignOpen(row){
            this.currentRowId = row.id
            this.formDesignVisible = true
        }
    }
};
</script>

<style  scoped></style>